<template>
    <div class="goodsmore">
      <button @click="mybtn()"></button>
        <div class="info">
           <h1>商品基本信息</h1>
        </div>
        <div class="Gname">
           <span class="nn">商品名</span><span></span>
        </div>
        <div id="myimg">
          <template>
            <div>
              
            </div>
          </template>
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1239324582,2503665773&fm=26&gp=0.jpg" prop="g_imgSrc" alt="" style="width:400px;float:left;margin-left:135px">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1239324582,2503665773&fm=26&gp=0.jpg" prop="g_imgSrc" alt="" style="width:400px;float:left">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1239324582,2503665773&fm=26&gp=0.jpg" prop="g_imgSrc" alt="" style="width:400px;float:left">
        </div>
<div>
  <div class="info1">
           <h1>商品基本信息</h1>
  </div>
  <el-table :data="tableData" border style="width: 90%;margin:auto">
    <el-table-column prop="g_id" label="编号" width="213"></el-table-column>
    <el-table-column prop="g_name" label="名称" width="213"> </el-table-column>
    <el-table-column prop="g_pPrice" label="进价" width="213"></el-table-column>
    <el-table-column prop="g_sPrice" label="售价" width="213"></el-table-column>
    <el-table-column prop="g_sole" label="售出" width="213"> </el-table-column>
    <el-table-column prop="g_inventory" label="库存" width="213"></el-table-column>
    <el-table-column prop="g_type" label="类型" width="216"></el-table-column>
  </el-table>

  <div class="info1"><h1>商品浏览信息</h1></div>
  <el-table :data="tableData1" border style="width: 90%;margin:auto;text-align: center;" class="table2">
    <el-table-column prop="date" label="创建时间" width="186"></el-table-column>
    <el-table-column prop="allcount" label="历史访问量" width="186"> </el-table-column>
    <el-table-column prop="today" label="今日访问量" width="186"></el-table-column>
    <el-table-column prop="week" label="本周访问量" width="186"></el-table-column>
    <el-table-column prop="mouth" label="本月访问量" width="186"></el-table-column>
    <el-table-column prop="paiming" label="商品排名" width="186"></el-table-column>
    <el-table-column prop="bianhua" label="本周排序变化" width="186"></el-table-column>
    <el-table-column prop="zhuanhua" label="浏览转化比" width="192"></el-table-column>
  </el-table>
  
  <div class="info1"><h1>商品促销信息</h1></div>
  <el-table :data="tableData2" border style="width: 90%;margin:auto;text-align: center;" class="table2">
    <el-table-column prop="date1" label="创单总量" width="186"></el-table-column>
    <el-table-column prop="allcount1" label="历史销售总量" width="186"> </el-table-column>
    <el-table-column prop="today1" label="今日销售量" width="186"></el-table-column>
    <el-table-column prop="week1" label="本周销售量" width="186"></el-table-column>
    <el-table-column prop="mouth1" label="本月销售量" width="186"></el-table-column>
    <el-table-column prop="paiming1" label="商城排名" width="186"></el-table-column>
    <el-table-column prop="bianhua1" label="本周变化排序" width="186"></el-table-column>
    <el-table-column prop="zhuanhua1" label="退货数量" width="192"></el-table-column>
  </el-table>


  <el-table :data="tableData3" border style="width: 90%;margin:auto;text-align: center;" class="table2">
    <el-table-column prop="date1" label="创单总价格（元）" width="186"></el-table-column>
    <el-table-column prop="allcount1" label="历史总流水（元）" width="186"> </el-table-column>
    <el-table-column prop="today1" label="今日总流水（元）" width="186"></el-table-column>
    <el-table-column prop="week1" label="本周流水（元）" width="186"></el-table-column>
    <el-table-column prop="mouth1" label="本月流水（元）" width="186"></el-table-column>
    <el-table-column prop="paiming1" label="商城排名" width="186"></el-table-column>
    <el-table-column prop="bianhua1" label="本周变化排序" width="186"></el-table-column>
    <el-table-column prop="zhuanhua1" label="退货总计（元）" width="192"></el-table-column>
  </el-table>


</div>
  </div>
</template>
<script>
//冲突
import { mapActions, mapState } from "vuex";
import axios from 'axios'
export default {
    name:'LjnMore',
     data() {
      return {
        tableData:[],
        tableData1:[{
            date: '2020/3/21',
            allcount: '50000',
            today: '100',
            week: '300',
            mouth: '6000',
            paiming: '3',
            bianhua: '下降2名',
            zhuanhua: '5%',
          }, ],
          tableData2:[{
            date1: '8000',
            allcount1: '5000',
            today1: '500',
            week1: '2000',
            mouth1: '10000',
            paiming1: '4',
            bianhua1: '下降2名',
            zhuanhua1: '6',
          }, ],
          tableData3:[{
            date1: '9600000',
            allcount1: '6000000',
            today1: '60000',
            week1: '240000',
            mouth1: '1200000',
            paiming1: '1',
            bianhua1: '保持不变',
            zhuanhua1: '720',
          }, ],

      }
    },
    // computed:{
    //   ...mapState({
    //     tableData
    //   }),
    // },
    methods:{
      ...mapActions(["getGoodsDataActions"]),
      mybtn(){
        axios({
          url: '/mock/24/getGoodsData',
          method: 'get'
        }).then(res => {
          console.log(res.data.data[0])
          this.tableData = [res.data.data[0]]
          console.log(this.tableData)
        })
      },
      beforeCreate() {
        this.getGoodsDataActions().then(res => {
        console.log(res);
      });
      },
    },
    
    created() {
      this.mybtn()
    }
    
}
</script>
<style lang="less" scoped>
.table2{
  text-align: center;
}
.el-table-column{
  text-align: center;
}
  .goodsmore{
    height: 960px;
    text-align: center;
  }
  .goods1{
    font-size: 24px;
  }
  .info{
    font-size: 24px;
    text-align: left;
    width: 90%;
    height: 60px;
    line-height: 60px;
    margin: auto;
    background-color: #e9e9e9;
    h1{
      margin-left: 10px;
    }
  }
  .info1{
    font-size: 16px;
    text-align: left;
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin: auto;
    background-color: #e9e9e9;
    h1{
      margin-left: 10px;
    }
  }
  .Gname{
    border: 1px solid #f9f9f9;
    margin: auto;
    text-align: left;
    width: 90%;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    .nn{
      margin-left: 10px;
    }
  }
  #myimg{
    margin: auto;
    width: 90%;
    height: 300px;
    background-color: #dfdfdf;
    img{
      width: 300px;
    }
  }
</style>